<template>
  <div id="swiperTop">
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in state.images" :key="image">
        <img :src="image.pic" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
// 引入 axios
import axios from 'axios'
import { reactive, onMounted } from 'vue'
import { getBanner } from '@/request/api/home'

export default {
  setup() {
    // 使用 vue3 组合式 api 实现 Swiper 轮播效果
    const state = reactive({
      images: ['https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg', 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg'],
    })
    // 请求数据,因为是 异步请求，所以 async 和 await
    onMounted(async () => {
      // axios.get('http://localhost:3000/banner?type=2').then((res) => {
      //   console.log(res)
      //   state.images = res.data.banners
      //   console.log(state.images)
      // })

      const res = await getBanner()
      // 保存数据，将数据赋值给 对象下的数据 images
      state.images = res.data.banners
      // console.log(res)
    })

    // vue3 中的新用法
    return { state }
  },
}
</script>

<style lang="less">
#swiperTop {
  .van-swipe {
    width: 100%;
    height: 10rem;
    margin-top: 20px;
    .van-swipe-item {
      padding: 0 0.2rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.2rem;
      }
    }
    // 轮播图圆点，如果不起作用，就把 scoped 标签属性个删掉，因为会引起冲突
    .van-swipe__indicator--active {
      background-color: rgb(219, 130, 130);
    }
  }
}

</style>
